2-4 静态资源的引入方式
三种引入方式
1. 绝对路径(推荐)
<image src="/static/logo.png" />
html
资源放在 static/ 目录下,编译时会被原样复制到产物目录。
2. 相对路径
<image src="../../static/logo.png" />
html
不推荐,路径层级深时容易出错。
3. require 引入
export default {
data() {
return {
logo: require('@/static/logo.png')
}
}
}
javascript
适合动态图片路径的场景。
注意事项
- 小程序端单张图片不超过 2MB
- 推荐使用 WebP 格式减小体积
- 网络图片需要在小程序后台配置域名白名单
- CSS 中的背景图片只能使用网络地址或 base64(小程序端)
↑